<template>
  <div class="clearfix">
    <div class="tab">
      <span
        @click="tabChange(99)"
        :class="url == 'api/user/tagged/99' ? 'active' : ''"
        >全部</span
      >
      <span
        @click="tabChange(0)"
        :class="url == 'api/user/tagged/0' ? 'active' : ''"
        >期刊</span
      >
      <span
        @click="tabChange(2)"
        :class="url == 'api/user/tagged/2' ? 'active' : ''"
        >报告</span
      >
      <span
        @click="tabChange(1)"
        :class="url == 'api/user/tagged/1' ? 'active' : ''"
        >新闻</span
      >
      <span @click="isFeedChange" :class="isFeed ? 'active' : ''">动态</span>
    </div>
    <FeedList v-if="isFeed"></FeedList>
    <list :apiUrl="url" v-else class="feed_list"></list>
  </div>
</template>

<script>
import FeedList from "@/views/page/feeds/FeedList";

export default {
  name: "feeds",
  components: { FeedList },
  filters: "",
  data() {
    return {
      url: "api/user/tagged/99",
      isFeed: false,
    };
  },
  methods: {
    tabChange(type) {
      this.isFeed = false;
      this.url = `api/user/tagged/${type}`;
    },
    isFeedChange() {
      this.isFeed = true;
      this.url = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.tab {
  display: flex;
  padding: 3px 0;
  span {
    width: 100px;
    text-align: center;
  }
  .active {
    border-bottom: 2px solid $f5;
    font-weight: 800;
    color: #000;
  }
}
</style>
